/**
 * @note 我的播鸭 - 新增根据头像ID搜索用户名称功能
 */

import * as boyaApi from '../service/boya.js';

console.log('已注入播鸭脚本扩展');

// 用户token
const token = JSON.parse(localStorage._boya_user_token)[0];

/**
 * 发送播鸭用户Token给后台脚本（接口需要用到）
 */
chrome.runtime.sendMessage(null, { token });

// 首次加载触发初始化
window.onload = init;

// 初始化
function init() {
  if (!token) {
    alert('请检查播鸭是否已登录~');
    return;
  }
  // 从localStorage中尝试获取用户信息
  const userData = JSON.parse(localStorage.getItem('_user_data'));
  if (userData) {
    replaceName(userData);
  } else {
    // 请求头像数据
    getAllCommodities();
  }

  // 新增搜索按钮
  // createButton();
}

// 请求数据
async function getAllCommodities() {
  try {
    const result = await boyaApi.getAllCommodities(token);
    if (result.data) {
      const data = result.data.allCommodities.nodes;
      const userData = {};
      // 处理数据
      data.forEach(item => {
        // 没有用户信息则返回
        if (!item.user) return;
        // 判断是否已保该用户对象
        // 从图片地址中解析用户code
        const temp = item.user.avatar.split('/');
        const code = temp[4].slice(0, -4);
        userData[code] = item.user.name;
      });

      // 将结果保存到localStorage中
      localStorage.setItem('_user_data', JSON.stringify(userData));
      replaceName(userData);
    }
  } catch {
    console.log('插件出问题啦~');
  }
}

// 替换用户名称
function replaceName(userData) {
  // 用户容器元素
  const nodes = document.querySelectorAll('.user-info-wrap___2cmEg');
  nodes.forEach(dom => {
    const src = dom.querySelector('img').src;
    const temp = src.split('/');
    const code = temp[4].slice(0, -4);

    const nameDom = dom.querySelector('.name___1td__');
    const nowName = nameDom.innerHTML;
    nameDom.innerHTML = userData[code] || '未查询到用户名';

    const infoDom = dom.querySelector('.user-info-desc___1dBae');
    if (infoDom) {
      infoDom.innerHTML += `(原名称：${nowName})`;
    } else {
      dom.innerHTML += `<div class="user-info-desc___1dBae">（原名称：${nowName}）</div>`;
    }
  });
}

// 新增搜索按钮方法
// function createButton() {
//   // 图标
//   const sreachIcon =
//     '<span role="img" class="anticon"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use xlink:href="#icon-search"></use></svg></span>';
//   // 创建按钮
//   const buttonDom = document.createElement('button');
//   buttonDom.innerHTML = sreachIcon;
//   // 添加样式
//   buttonDom.style.cssText = `
//       background-color: rgb(94, 203, 87);
//       color: rgb(255, 255, 255);
//       width: 30px;
//       height: 30px;
//       border-radius: 6px;
//       margin-left: 5px;
//       font-size: 24px;
//       line-height: 24px;
//       box-shadow: rgba(94, 203, 87, 0.6) 0px 2px 6px 0px;
//       position: relative;
//     `;
//   const inputDom = document.querySelector('.ant-input-affix-wrapper').children[0];
//   inputDom.placeholder = '请输入歌曲、艺人、专辑 / 头像ID编号';
//   // 添加按钮点击事件
//   buttonDom.addEventListener('click', () => {
//     searchUserCode(inputDom.value);
//     document.querySelector('.ant-input-clear-icon').click(); // 触发清空事件
//   });
//   // 加入按钮组父级容器
//   pollingHandle(buttonDom);
// }

// // 获取按钮组父级容器 切换路由可能导致组件未渲染而获取null
// function pollingHandle(buttonDom) {
//   const className = 'middle-wrap___2XeZY';
//   // 获取按钮组父级容器
//   const parent = document.querySelector(`.${className}`);
//   if (parent) {
//     parent.appendChild(buttonDom);
//   } else {
//     console.log(`未找到父级容器，请查看父级容器类名是否为：${className}`);
//   }
// }

// // 搜索用户名称
// function searchUserCode(id) {
//   if (!id) return;
//   const userInfo = allCommoditiesArray.find(item => item.code === id);
//   if (!userInfo) {
//     window.alert('该ID对应的头像还没有生产出来喔~');
//     return;
//   }
//   const name = userInfo.user ? userInfo.user.name : '该头像还没有主人，快去抢购吧~';
//   window.alert(name);
// }
